<template>
<div class="add-advertise-place">
    <!-- <div class="pop-name">增加推广位</div> -->
    <div class="attributes">
        <div class="attribute type">
          <label class="name">类型：</label>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
        <div class="attribute type">
          <label class="name">子类：</label>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
        <div class="attribute">
            <label class="name">标题：</label>
            <el-input v-model="title" placeholder="输入推广位名称"></el-input>
        </div>
        <div class="attribute">
            <label class="name">说明：</label>
            <el-input v-model="description" placeholder="推广位建议，如：建议图片不超过 6 张"></el-input>
        </div>
        <div class="attribute size">
            <span class="name">尺寸：</span>
            <el-input v-model="width" placeholder="宽"></el-input><span>px</span>
            <el-input v-model="height" placeholder="高"></el-input><span>px</span>
        </div>
        <div class="tips">*此处尺寸为图片尺寸</div>
    </div>
    <div class="tool-buttons">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addition">确定增加</el-button>
    </div>
</div>
</template>  
<script>
export default{
    data() {
        return {
        value:'',
        options: [{
          value: '选项1',
          label: '多图'
        }, {
          value: '选项2',
          label: '单图'
        }],
        description: '',
        title:'',
        width:'',
        height:'',
      }
    },
    methods: {
      addition (){
        this.$emit('additionMethod', this.title,this.description,this.width,this.height)
      },
      cancel () {
        this.$emit('cancelMethod');
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
}
</script>   
<style scoped lang="scss">
.add-advertise-place{
  width:476px;
  //padding:30px 30px 0;
  background:#fff;
  border-radius: 4px;
  .pop-name{
    font-size: 18px;
    color: #0F1B41;
    line-height: 18px;
  }
  .attributes{
  //  margin-top:35px;
    .attribute{
      margin-bottom:20px;
      display: inline-block;
      width:100%;
      &:after{
        display:block;
        content:'.';
        clear: both;
        font-size: 0;
      }
      .name{
        float:left;
        padding:0;
        font-size: 14px;
        color: #5A7180;
        line-height: 36px;
      }
      .el-input,.el-select,.el-range-editor,.options{
        float:left;
        width:422px;
      }
      .options{
                .item{
                    float:left;
                    margin:0 10px 10px 0;
                    width:60px;
                    height:36px;
                    line-height:34px;
                    background: #FFFFFF;
                    border: 1px solid #F2F2F2;;
                    border-radius: 2px;
                    font-size: 14px;
                    text-align: center;
                    cursor: pointer;
                    &.on,&:hover{
                        color:#5A7180;
                        border-color:#FDD5A2 ;
                    }
                }
      }
    }
      .type{
        width:223px;
        .el-select{
          width:177px;
        }
      }
      .size{
        .el-input{
          width:70px;
          text-align: center;
        }
        span{
          float:left;
          padding:0 30px 0 10px;
          height:36px;
          line-height: 36px;
        }
      }
  }
  .tips{
    color: #CBD5DE;
    font-size:12px;
  }
  .tool-buttons{
    margin-top:32px;
    padding:32px 0 0;
    clear: both;
    text-align: center;
    border-top:1px solid #eaeaea;
  }
}
</style>